<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../static/lib/layui/css/layui.css" />
		<script src="../../static/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="layui-body">
			<!-- 内容主体区域 -->
			<div style="padding: 20px;">
				<form action="" class="layui-form" lay-filter="addBook" style="margin-right:30px;margin-top: 20px;">
						<div class="layui-form-item">
							<label class="layui-form-label">分类</label>
							<div class="layui-input-block">
								<select name="categoryCode" id="categoryCode">
								</select>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">书名</label>
							<div class="layui-input-block">
								<input type="text" id="bookName" name="bookName" required lay-verify="required" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item layui-form-text">
							<label class="layui-form-label">书籍描述</label>
							<div class="layui-input-block">
								<textarea name="description" placeholder="书籍简要描述" class="layui-textarea"></textarea>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">ISBN</label>
							<div class="layui-input-block">
								<input type="text" id="isbn" name="isbn" required lay-verify="required" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">出版社</label>
							<div class="layui-input-block">
								<input type="text" id="press" name="press" required lay-verify="required" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">作者</label>
							<div class="layui-input-block">
								<input type="text" id="author" name="author" required lay-verify="required" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">出版日期</label>
							<div class="layui-input-block">
								<input type="text" id="pubDate" name="pubDate" required lay-verify="required" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">价格</label>
							<div class="layui-input-block">
								<input type="number" min="0" id="price" name="price" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">库存</label>
							<div class="layui-input-block">
								<input type="number" min="0" id="stock" name="stock" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">上传图片</label>
							<div class="layui-input-block">
								<button type="button" class="layui-btn" id="upload-book-image">
									<i class="layui-icon">&#xe67c;</i>上传图片
								</button>
								<input type="text" name="image" autocomplete="off" class="layui-input" style="display: none;">
							</div>
						</div>
						<div class="layui-form-item">
						    <div class="layui-input-block">
						      <button class="layui-btn" lay-submit lay-filter="addBookBtn">立即提交</button>
						      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
						    </div>
						  </div>
					</form>
				
			</div>
		</div>
			</body>
	<script type="text/javascript">
		layui.use(['table', 'form', 'jquery', 'layer', 'upload'], function() {
			var table = layui.table,
				$ = layui.jquery,
				layer = layui.layer,
				upload = layui.upload,
				form = layui.form;

			//上传图片
			var uploadInst = upload.render({
				elem: '#upload-book-image' ,//绑定元素
				url: '/upload/' ,//上传接口
				accept: 'images' ,//只允许上传图片
				acceptMime: 'image/*' ,//只筛选图片
				// size: 1024*2 //限定大小
				done: function(res) {
					//上传完毕回调
				},
				error: function() {
					//请求异常回调
				}
			});
			
			$.getJSON("../../static/api/category.json", function(res) {
				if (res.code != 0) {
					return;
				}
				$.each(res.data, function(index, item) {
					$("#categoryCode").append('<option value="' + item.categoryCode + '">' + item.categoryName +
						'</option> ');
				});
				form.render();
			});
			
			//提交
			 form.on('submit(addBookBtn)', function(data){
			   var data = form.val('book-form');
			   console.log(data);
			    return false;
			  });
		});
	</script>
</html>
